<template>
  <div class="floating-price-card" :style="cardStyle">
    <div class="card-content">
      <div class="crypto-icon">
        <Icon :icon="cryptoData.icon" :width="24" :height="24" />
      </div>
      <div class="crypto-info">
        <div class="crypto-name">{{ cryptoData.name }}</div>
        <div class="crypto-price">
          <AnimatedNumber :value="displayPrice" :decimals="cryptoData.decimals" />
        </div>
        <div class="crypto-change" :class="changeClass">
          <Icon :icon="changeIcon" :width="12" :height="12" />
          {{ Math.abs(cryptoData.change).toFixed(2) }}%
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import { Icon } from '@iconify/vue'
import AnimatedNumber from './AnimatedNumber.vue'

interface CryptoData {
  name: string
  icon: string
  price: number
  change: number
  decimals: number
}

interface Props {
  cryptoData: CryptoData
  animationDelay?: number
  floatDirection?: 'up' | 'down'
}

const props = withDefaults(defineProps<Props>(), {
  animationDelay: 0,
  floatDirection: 'up'
})

const displayPrice = ref(0)

const cardStyle = computed(() => ({
  '--animation-delay': `${props.animationDelay}s`,
  '--float-direction': props.floatDirection === 'up' ? '-20px' : '20px'
}))

const changeClass = computed(() =>
  props.cryptoData.change >= 0 ? 'positive' : 'negative'
)

const changeIcon = computed(() =>
  props.cryptoData.change >= 0 ? 'mdi:trending-up' : 'mdi:trending-down'
)

onMounted(() => {
  // 延迟启动价格动画
  setTimeout(() => {
    displayPrice.value = props.cryptoData.price
  }, props.animationDelay * 1000)
})
</script>

<style scoped lang="scss">
.floating-price-card {
  position: absolute;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(124, 58, 237, 0.1);
  border-radius: 16px;
  padding: 16px;
  box-shadow: 0 8px 32px rgba(124, 58, 237, 0.1);
  animation: floatAnimation 6s ease-in-out infinite;
  animation-delay: var(--animation-delay);
  cursor: pointer;
  transition: all 0.3s ease;

  &:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 40px rgba(124, 58, 237, 0.15);
  }

  .card-content {
    display: flex;
    align-items: center;
    gap: 12px;

    .crypto-icon {
      width: 32px;
      height: 32px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: rgba(124, 58, 237, 0.1);
      border-radius: 8px;
    }

    .crypto-info {
      .crypto-name {
        font-size: 14px;
        font-weight: 600;
        color: #1a202c;
        margin-bottom: 4px;
      }

      .crypto-price {
        font-size: 16px;
        font-weight: 700;
        color: #2d3748;
        margin-bottom: 4px;
      }

      .crypto-change {
        display: flex;
        align-items: center;
        gap: 4px;
        font-size: 12px;
        font-weight: 500;

        &.positive {
          color: #10b981;
        }

        &.negative {
          color: #ef4444;
        }
      }
    }
  }
}

@keyframes floatAnimation {
  0%, 100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(var(--float-direction));
  }
}

// 响应式设计
@media (max-width: 1024px) {
  .floating-price-card {
    position: static;
    margin: 8px 0;
    animation: none;

    .card-content {
      .crypto-icon {
        width: 28px;
        height: 28px;
      }

      .crypto-info {
        .crypto-name {
          font-size: 13px;
        }

        .crypto-price {
          font-size: 15px;
        }

        .crypto-change {
          font-size: 11px;
        }
      }
    }
  }
}
</style>